<template>
  <div class="discuss w-full">
    <div v-if="paging === 1 && JSON.stringify(remark.hotComments) !== '[]'">
      <p class="text-left">精彩评论</p>
      <div class="">
        <dl
          v-for="(item, index) in remark.hotComments"
          :key="index"
          v-show="hotCommentshow > index"
          class="flex m-3 pb-3 Comments text-gray-700"
        >
          <dt>
            <img :src="item.user.avatarUrl" class="w-10 h-10 rounded-full" />
          </dt>
          <dd class="ml-2 text-left text-xs w-full">
            <p class="text-sm my-2 block">
              <span class="text-blue-700">{{ item.user.nickname }}:</span>
              {{ item.content }}
              <span
                v-if="JSON.stringify(item.beReplied) !== '[]'"
                class="bg-gray-200 block ml-5 p-1 text-gray-700 text-xs"
              >
                <span class="text-blue-700"
                  >@{{ item.beReplied[0].user.nickname }}:</span
                >
                {{ item.beReplied[0].content }}
              </span>
            </p>
            <div class="flex justify-between pr-10">
              <p class="my-1">{{ item.time | changeTime }}</p>
              <div class="flex items-center">
                <i class="iconfont mx-1 cursor-pointer">&#xe601;</i>
                <span class="mx-1">{{ item.likedCount }}</span>
                |
                <i class="iconfont mx-1 cursor-pointer">&#xe606;</i>
                |
                <i class="iconfont mx-1 cursor-pointer">&#xe628;</i>
              </div>
            </div>
          </dd>
        </dl>
      </div>
      <div
        v-if="
          remark.hotComments !== undefined &&
          hotCommentshow < remark.hotComments.length
        "
        class="flex items-center justify-center cursor-pointer"
      >
        <div
          class="w-36 h-10 leading-10 border rounded-full text-xs px-3"
          @click="hotCommentshow += 10"
        >
          加载更多精彩评论>
        </div>
      </div>
    </div>
    <div>
      <p class="text-left">最新评论({{ remark.total }})</p>
      <div class="">
        <dl
          v-for="(item, index) in remark.comments"
          :key="index"
          class="flex m-3 pb-3 Comments text-gray-700"
        >
          <dt>
            <img :src="item.user.avatarUrl" class="w-10 h-10 rounded-full" />
          </dt>
          <dd class="ml-2 text-left text-xs w-full">
            <p class="text-sm my-2 block">
              <span class="text-blue-700">{{ item.user.nickname }}:</span>
              {{ item.content }}
              <span
                v-if="JSON.stringify(item.beReplied) !== '[]'"
                class="bg-gray-200 block ml-5 p-1 text-gray-700 text-xs"
              >
                <span class="text-blue-700"
                  >@{{ item.beReplied[0].user.nickname }}:</span
                >
                {{ item.beReplied[0].content }}
              </span>
            </p>
            <div class="flex justify-between pr-10">
              <p class="my-1">{{ item.time | changeTime }}</p>
              <div class="flex items-center">
                <i class="iconfont mx-1 cursor-pointer">&#xe601;</i>
                <span class="mx-1">{{ item.likedCount }}</span>
                |
                <i class="iconfont mx-1 cursor-pointer">&#xe606;</i>
                |
                <i class="iconfont mx-1 cursor-pointer">&#xe628;</i>
              </div>
            </div>
          </dd>
        </dl>
      </div>
      <div>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          hide-on-single-page
          class="text-xs"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paging: 1,
      remark: {},
      hotCommentshow: 10,
      latestComments: [],
      pageSize: 50,
      total: 1,
    };
  },
  methods: {
    getremark(page) {
      return this.axios({
        method: "get",
        url: `https://music.hzbiz.net/comment/${this.$route.params.name}`,
        params: {
          id: this.$route.params.id,
          limit: this.pageSize,
          offset: (page - 1) * this.pageSize,
        },
      })
        .then((result) => {
          this.remark = result.data;
          this.total = result.data.total;
          this.latestComments = result.data.comments;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      this.paging = val;
      this.getremark(this.paging);
    },
  },
  created() {
    this.getremark(this.paging);
  },
  filters: {
    changeTime(val) {
      let nowdate = new Date();
      let time = nowdate - val;
      if (time < 300000) {
        return "刚刚";
      } else if (time > 3600000 && time < 86400000) {
        return `${Math.floor(time / 3600000)}小时前`;
      } else if (time > 86400000 && time < 2592000000) {
        return `${Math.floor(time / 86400000)}天前`;
      } else if (time < 31536000000) {
        time = new Date(val);

        return `${time.getFullYear()}年${
          time.getMonth() + 1
        }月${time.getDate()}日`;
      }
      return "";
    },
  },
};
</script>


<style lang="scss" scoped>
.useheadimg {
  width: 92px;
  height: 92px;
}
.Comments {
  border-bottom: 1px solid #ccc;
}
.play-all {
  background: #ec4141;
  &:hover {
    background: #d73535;
  }
}
.collect-all:hover {
  background: #f2f2f2;
}
.synopsis {
  width: 1436px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>